import React, { useState, useEffect } from 'react';
import './App.css';

import {XForm, XSelect} from '@zjxpcyc/xrc-form2'
import { Input } from 'antd'


function App() {
  const [formValue, setFormValue] = useState({})
  const [form] = XForm.useForm()

  useEffect(() => {
    form.setFieldsValue({ userPassword: '1234' })
  }, [])

  const fields = [
    {
      label: '姓名',
      name: 'userName',
      value: '@qq.com',
      render: <Input/>,
      // help: '请填写您注册时的手机号或者邮箱',
      required: true,
    },
    {
      label: '密码',
      name: 'userPassword',
      render: <Input.Password placeholder="请输入密码" />,
      required: true,
    },
    {
      label: ' ',
      colon: false,
      render: '此行文本会随着姓名的输入而显示',
      style: { display: formValue.userName ? undefined : 'none' },
    },
    {
      label: '身份类型',
      name: 'userType',
      render: <XSelect dict={[ { label: '管理员', value: 'admin' }, { label: '普通职员', value: 'common' } ]} />,
    }
  ]

  const handleSubmit = (allValues) => {
    console.log(allValues)
  }

  return (
    <div className="App">
      <header className="App-header">
        <h4>用户登录</h4>
        <XForm
          form={form}
          fields={fields}
          style={{ width: '400px' }}
          onSubmit={handleSubmit}
          onValuesChange={setFormValue}
        />        
      </header>
    </div>
  );
}

export default App;
